import React from 'react'
import { Table, Divider, Button, Icon, Popconfirm, message } from 'antd'
import DrawerForm from './Drawer'

class BrandManagement extends React.Component {
	state = {
		loading: false,
		columns: [
			{
				title: '标题名称',
				dataIndex: 'title'
			},
			{
				title: '视频',
				dataIndex: 'videoUrl',
				render: text => <a target="_blank" rel="noopener noreferrer" href={ text }>
					<video style={{ height: 100 }} src={ text }></video>
				</a>
			},
			{
				title: '图片',
				dataIndex: 'picUrl',
				render: text => <a target="_blank" rel="noopener noreferrer" href={ text }>
					<img style={{ height: 100 }} src={ text } alt="" />
				</a>
			},
			{
				title: '操作',
				render: (text, record) => (
					<span>
						<a onClick={ () => this.getDetail(record.id) }>编辑</a>
						<Divider type="vertical" />
						<Popconfirm title="确认要删除？" onConfirm={ () => this.delete(record.id) } okText="确定" cancelText="取消">
							<a>删除</a>
						</Popconfirm>
					</span>
				),
			},
		],
		data: []
	}

	componentDidMount() {
		this.init()
	}

	// 初始化数据
	init = async () => {
		this.setState({ loading: true })

		const { data } = await React.$axios.get('/BrandPublicity/GetBrandPublicityList')

		this.setState({ 
			data: data.reverse(),
			loading: false
		})
	}

	// 删除数据
	delete = async id => {
		const { code, message: mes } = await React.$axios.get(`/BrandPublicity/DeleteBrandPublicity?id=${id}`)

		message.info(mes)

		if (code) this.init()
	}

	// 调用子组件获取详情方法
	getDetail = id => {
		this.child.getDetail(id)
	}

	// 调用子组件显示弹窗方法
	toggleDrawer = () => {
		this.child.toggleDrawer()
	}

	render() {
		return (
			<div>
				<div style={{ overflow: 'hidden', marginBottom: 10, textAlign: 'right' }}>
					<Button onClick={ this.toggleDrawer } type="primary">
						<Icon type="plus-circle" />新增
					</Button>
				</div>
				<Table
					loading={ this.state.loading } 
					columns={ this.state.columns } 
					rowKey="id" 
					dataSource={ this.state.data } 
				/>
				<DrawerForm init={ this.init } onRef={ ref => this.child = ref } />
			</div>
		)
	}
}

export default BrandManagement